import React, { Component, createContext } from 'react'
import Child from './Child'

// 通过ceateConText 函数创建上下文对象
// Context.Provider 可以接受一个值，这个值就是上下文的值(提供数据时)
// Context.Consumer 可以接受一个函数，这个函数就是消费者(使用数据时)
export const Context = createContext()

export default class App extends Component {
  state = {
    num: 99,
    count: 0,
  }

  render() {
    // 2. 将App组件结构包裹到Context.Provider中, 用于提供数据
    // 通过value提供数据 => 意味着App子孙后代们 都可以使用你提供的数据
    return (
      <div>
        <Context.Provider
          value={{ num: this.state.num, count: this.state.count }}
        >
          <div>
            <h3>父组件</h3>
            <hr />
            <Child></Child>
          </div>
        </Context.Provider>
      </div>
    )
  }
}
